<template>
        <div class="form">
             <h2>千锋管理系统</h2>
             <i class="iconfont icon-erweima1"></i>
             <el-form :model="loginForm" status-icon   label-width="100px" class="demo-ruleform" :rules="rules" ref="loginForm">
                <el-form-item  prop="username">
                    <el-input type="text" v-model="loginForm.username" autocomplete="off" placeholder="用户名"></el-input>
                </el-form-item>
                <el-form-item  prop="password">
                    <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item  prop="captcha">
                    <el-input type="text" class="captchaInpt" placeholder=" 验证码" v-model="loginForm.captcha" autocomplete="off" @keydown.native.enter="submitForm('loginForm')" ></el-input>
                     <span class="showQrcode" v-html="captcha" @click="getCaptcha" v-loading='loading'></span>
                </el-form-item>
                <el-form-item>
                        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button> 
                </el-form-item> 

                <div class="changeLoginWay">
                    <svg class="icon qrcode" aria-hidden="true" @click='qrjump'>
                         <use xlink:href="#icon-erweimajiaobiao" width='60px' height='60px'></use>
                    </svg>
                  
                </div>
                <div class="jihe">
                        <svg class="icon qrcode1" aria-hidden="true">
                             <use xlink:href="#icon-iphone" width='28px' height='28px'></use>
                        </svg>
                        <a @click.prevent='jump'>切换短信登录</a>
                </div>
            </el-form>
        </div>
</template>

//  登录
//   1.获取后台的验证码
//   2.进行本地校验
//   3.本地校验通过 => 校验验证码
//   4.验证码通过再校验用户名和密码
//   5.成功或失败
//   本地校验成功。。。
//   这些逻辑都是在提交按钮,也就是submitForm方法被触发时发生的



<script>

            //引入users  axios
            import * as api from '@/api/users'

            // 引入storage 方法 (用于设置和读取本地)
            import storage from '@/api/storage'


export default ({   
    data(){
         return {
                    captcha:'',

                    // 用来控制加载动画的显示与否
                    loading:false,

                    loginForm: {
                        username: '',
                        password: '',
                        captcha: ''
                    },
                    rules: {
                        username: [
                            { validator: this.validateUsername, trigger: 'blur' }
                        ],
                        password: [
                            { validator: this.validatePassword, trigger: 'blur' }
                        ],
                        captcha: [
                            { validator: this.validateCaptcha, trigger: 'blur' }
                        ],

                        }
                    };
    },

    mounted () {
        // 调用获取验证码方法
        this.getCaptcha()
        // 当页面挂载时，二维码加载动画需要显示
        this.loading = true
    },

    methods: {
                jump(){
                    // 点击  切换到短信登录，需要告诉父组件需要跳转到对应的组件
                    this.$emit('watchChange','messageLogin')
                },


                qrjump(){
                    this.$emit('watchChange','qrLogin')
                },



                validateCaptcha(rule, value, callback){
                    // 验证码必须是五位，不区分大小写

                    // console.log(value);
                    let captchaReg = /^[a-zA-Z0-9]{5}$/ig

                    if(captchaReg.test(value)){
                        callback()
                    }else{
                        callback('验证码有误')
                    }

                },
                validateUsername(rule, value, callback){
                    // 设置校验规则,如果value(输入值)符合正则，回调成功，否则回调失败
                    let nameReg = /^[\u4e00-\u9fa5a-zA-Z0-9_-]{2,16}$/

                    if(nameReg.test(value)){
                        callback()
                    }else{
                        callback('用户名必须是2-16位')
                    }

                },
                validatePassword (rule, value, callback) {
                    if(value){
                        callback()
                    }else{
                        callback('密码不能为空')
                    }
                },



                // 封装一个获取验证码的方法,当此组件出现时此方法就应该被调用,写在mounted钩子函数中
                getCaptcha(){
                    // 当触发获取二维码函数时，加载动画开启
                    this.loading = true
                    api.getCaptcha()
                        .then(res =>{
                            // console.log(res.data.img);
                            this.captcha = res.data.img

                            // 当获取到了验证码，加载动画就需要关闭
                            this.loading = false
                        })
                },


                // 封装一个方法，用于存储用户的信息和token
                storageUserInfo({userInfo, token, permission}){
                     // 将用户信息存储到vuex中
                    this.$store.commit('users/SET_USERINFO', userInfo)
                    // console.log(userInfo);
                    storage.set('userInfo',userInfo)
                    storage.set('qf-token',token)
                    storage.set('permission',permission)
                },



                submitForm(loginForm) {
                    // console.log(loginForm);
                    //  登录
                    //   1.获取后台的验证码
                    //   2.进行本地校验
                    //   3.本地校验通过 => 校验验证码
                    //   4.验证码通过再校验用户名和密码
                    //   5.成功或失败

                    
                    
                    this.$refs['loginForm'].validate((valid) => {

                    if (valid) {
                        // 假如走了这个if表示本地校验成功,就需要校验验证码了,
                        // 传入的参数是用户输入的验证码
                        
                        api.verifyCaptcha(this.loginForm.captcha)
                            .then(async res => {
                                //  返回值res中的data中的state有两个值，true表示成功，false表示失败
                                if(res.data.state){
                                    // 验证码校验成功，开始校验用户名和密码
                                    let {username,password} = this.loginForm
                                    api.userNameLogin(username,password)
                                        .then(response => {
                                            // 返回值response中的data中的state有两个值，true表示成功，false表示失败
                                            // 如果登录成功，那么许需要将用户信息存储至本地，同时跳转至主页
                                            if(response.data.state){
                                                // 存储信息到本地
                                                this.storageUserInfo(response.data)
                                                this.$message({
                                                    message: '登陆成功',
                                                    type: 'success'
                                                });
                                                    // 跳转至主页
                                                this.$router.push('/')
                                            }
                                        })
                                } else{
                                    // 刷新验证码
                                    this.getCaptcha()
                                    // 清空验证码输入框
                                    this.loginForm.captcha = ''
                                }
                            })
                    }else{
                                    // 刷新验证码
                                    this.getCaptcha()
                                }
                    });
                },




    }
})
</script>



<style scoped lang='less'>
        /deep/.el-input__inner{
            width: 250px;
        }

       .jihe{
          justify-content: center;
          align-items: center;
           display: flex;

       }
       .qrcode{
            position: absolute;
            right: 10px;
            top: 10px;
            width: 60px;
            height: 60px;
        }

         .qrcode1{
            width: 28px;
            height: 28px;
        }

        .changeLoginWay{
            margin-top: 10px;
        }

        a{
           color: white;
        }
        .icon-erweima1:before{
           font-size: 50px;
           color: white;
        }

         .showQrcode{
            height: 40px;
            width: 150px;
            vertical-align:middle;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            background: white;
            display: inline-block;
            box-sizing: border-box;

        }

        .captchaInpt{
            width: 100px;
        }
         /deep/.captchaInpt .el-input__inner{
            height: 40px;
            outline-style: none;
            border: none;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            vertical-align: middle;
            width: 100px!important;
        }
        /deep/.el-form-item{
            display: flex;
        }
      

        .el-button{
            width: 250px;
        }
       
      

       
        .bg{
            position: fixed;
            right: 0;
            bottom: 0;
            left: 0;
            top: 0;
            video{
                width: 1280px;
            }
        }

  
     
        /deep/.el-form-item__label{
            width: 60px!important;
            color: white;
        }
        .el-form-item{
            display: flex;
            justify-content: center;
            width: 350px;
        }
        /deep/.el-form-item__content{
            margin: 0!important;
        }
        h2{
            margin: 0;
            margin-left: 20px;
            color: white;
        }
        .el-row{
            text-align: center;
           
        }
       /deep/.el-button--primary{
            background:rgba(39, 1, 13, 0.5);
            border: none;
            border-top-right-radius: 50px;
            border-bottom-left-radius: 50px;
            border-bottom-right-radius: 30px;
            border-top-left-radius: 60px;
            color:white;
            font-size: 20px;
        }


          .form{
            width: 350px;
            height: 400px;
            position: absolute;
            right: 40px;
            top:50px;
            background: url(../../assets/img/pic1.webp);
            background-size: 350px 380px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            border-radius: 30px;
        }
</style>
